<template>
    <div>
        <div class="common_form_search">
            <el-form ref="searchForm" :inline="true" :model="searchForm">
                <el-form-item label="账号">
                    <el-input v-model="searchForm.account_num" placeholder="请输入账号" clearable />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.is_check" placeholder="全部" clearable>
                        <el-option label="已审核" :value="1" />
                        <el-option label="待审核" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" @click="search()">查询</el-button>
                    <el-button size="small" @click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-divider />
        <div class="flex align-center table-top-btns">
            <h5 class="flex align-center">
                <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
            </h5>
        </div>
        <el-table v-show="tableData.length > -1" :data="tableData" border>
            <el-table-column align="center" prop="sale_user_id" label="ID" />
            <el-table-column align="center" prop="contact_tel" label="账号" />
            <el-table-column align="center" prop="faname" label="姓名" />
            <el-table-column align="center" prop="parent_user_id" label="邀请人" />
            <el-table-column align="center" prop="people" label="联系人姓名" />
            <el-table-column align="center" prop="contact_tel" width="100" label="联系人手机号" />
            <el-table-column align="center" prop="create_time" label="申请时间" />
            <el-table-column align="center" prop="is_show" label="是否启用">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.is_show == 1 ? 'success' : scope.row.is_show == 2 ? 'danger' : ''">
                        {{ scope.row.is_show == 1 ? "启用" : scope.row.is_show == 2 ? "禁用" : "" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="is_check" label="审核状态">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.is_check == 1 ? 'success' : scope.row.is_check == 2 ? 'danger' : ''">
                        {{ scope.row.is_check == 1 ? "已审核" : scope.row.is_check == 2 ? "待审核" : "" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="240">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"
                        @click="$router.push({ name: 'saleView', params: { viewId: scope.row.sale_user_id } })">查看</el-button>
                    <el-button v-if="scope.row.is_check == 2" type="primary" size="mini" @click="handleCheck(scope.row.id)">待审核</el-button>
                    <el-button :type="scope.row.is_show == 1 ? 'danger' : 'warning'" size="mini"
                        @click="enable(scope.row.id, scope.row.is_show)">
                        {{ scope.row.is_show == 1 ? "禁用" : "启用" }}
                    </el-button>
                    <el-dropdown @command="command => handleMore(command, scope.row)">
                        <span class="el-dropdown-link blue-font pointer" style="margin-left:10px">
                            更多操作<i class="el-icon-arrow-down el-icon--right" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="edit">编辑资料</el-dropdown-item>
                            <!-- <el-dropdown-item command="check">审核资料</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <custom-page ref="customPage" :total="total" @getList="getList" />
        <check-dialog ref="checkDialog" :check-id="checkId" @getList="getList"/>
    </div>
</template>
  
<script>
import { getSupplierList, editSupplier,saleApplyList } from '@/api/user'
import customPage from '@/components/customPage'
import checkDialog from './components/checkDialog'
export default {
    components: { customPage,checkDialog },
    // props: ['shopname'],
    props: {
        shopname: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            searchForm: {
                shopname: '',
                account_num: '',
                is_check: null
            },
            total: 0,
            tableData: [],
            routerName: '',
            checkId:''
        }
    },
    // computed: {
    //   shopname(){
    //     console.log('shopname1',this.$route.query.shopname)
    //   }
    // },
    created() {
        // console.log('shopname1',this.$route.query.shopname)
        if (this.$route.query.shopname) {
            this.routerName = this.$route.query.shopname
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        handleMore(command, item) {
            // console.log(command, item)
            // this.selectedItem = item;
            if (command === 'edit') {
                // 编辑资料
                this.$router.push({ name: 'saleView', params: { viewId: item.id, toEdit: true } })
            } else {
                // 查看备注
            }
        },
        // 查询
        search() {
            this.$refs.customPage.page = 1
            this.getList()
        },
        // 重置
        reset() {
            this.searchForm = {
                shopname: '',
                account_num: '',
                status: null
            }
            this.routerName = ''
            this.getList()
        },
        handleCheck(item){
            this.checkId=item
            this.$refs.checkDialog.dialogVisible = true
            console.log(item);
        },
        // 启用/禁用
        enable(id, endisable) {
            editSupplier({
                id,
                endisable: endisable === 1 ? 2 : 1
            }).then(res => {
                this.getList(true)
            })
        },
        getList(flag) {
            // flag为true, 则不刷新表格
            const { page, pageSize } = this.$refs.customPage
            if (!flag) {
                this.tableData = []
            }
            console.log(page);
            console.log(pageSize);
            this.searchForm.shopname = this.searchForm.shopname || this.routerName
            saleApplyList({ page, pageSize, ...this.searchForm }).then(res => {
                this.tableData = res.data || []
                this.total = res.total
            })
        }
    },
    beforeRouteEnter(to, from, next) {
        if (from.name === 'supplierView') {
            next(vm => {
                vm.getList()
            })
        } else {
            next()
        }
    }
}
</script>
  
<style lang="scss" scoped>

</style>
  